<template>
  <div class="home_page">
      <Row :gutter="16">
          <Col :md="17" :lg="17" :sm="24" :xs="24">
                <div class="carBox">
                    <Carousel
                        v-model="value"
                        :autoplay="setting.autoplay"
                        :autoplay-speed="setting.autoplaySpeed"
                        :dots="setting.dots"
                        :radius-dot="setting.radiusDot"
                        :trigger="setting.trigger"
                        :arrow="setting.arrow"
                        ref="car">
                        <CarouselItem>
                            <div class="demo-carousel">
                                <img   src="https://happychuan.oss-cn-shenzhen.aliyuncs.com/web/car2.jpg" alt="">
                            </div>
                        </CarouselItem>
                        <CarouselItem>
                            <div class="demo-carousel">
                                <img src="https://happychuan.oss-cn-shenzhen.aliyuncs.com/web/car4.jpg" alt="">
                            </div>
                        </CarouselItem>
                        <!-- <CarouselItem>
                            <div class="demo-carousel">
                                <img src="../../assets/front/car2.jpg" alt="">
                            </div>
                        </CarouselItem>
                        <CarouselItem>
                            <div class="demo-carousel">
                                <img src="../../assets/front/car3.jpg" alt="">
                            </div>
                        </CarouselItem> -->
                    </Carousel>
                </div><!--carBox-->
                <Hot />
                <ArticleList :flag="1"/>
            </Col>
            <Col :md="7" :lg="7" :sm="0" :xs="0">
                 <Input search placeholder="Enter something..." style="width:300px;margin-bottom:10px" @on-search='search' />
                <PersonalInfo />
                <Contact />
                <TagCloud />
                <FriendlyLink />
            </Col>
      </Row>
  </div>
  
</template>

<script>
import PersonalInfo from '@/components/front/PersonalInfo.vue'
import TagCloud from '@/components/front/TagCloud.vue'
import FriendlyLink from '@/components/front/FriendlyLink.vue'
import Contact from '@/components/front/Contact.vue'
import Hot from '@/components/front/Hot.vue'
import ArticleList from '@/components/front/ArticleList.vue'
import {mapMutations} from 'vuex'
export default {
    data () {
        return {
            value: 0,
            setting: {
                autoplay: true,
                autoplaySpeed: 2000,
                dots: 'inside',
                radiusDot: true,
                trigger: 'click',
                arrow: 'hover'
            }
        }
    },
    components:{
        PersonalInfo,
        TagCloud,
        FriendlyLink,
        Contact,
        Hot,
        ArticleList
    },
    computed:{

    },
    methods:{
        ...mapMutations(['changevisitTotal']),
        init(){
            this.$axios.get('/api/visitTotal').then(res=>{
                if(res.data.code == 0){
                    this.changevisitTotal({visitTotal:res.data.data.visit})
                }
            })
            this.$axios.get('/api/ip')
        },
        search(value){
            if(value){
                this.$router.push({path:'/search',query:{searchName:value}})
            }
        }
    },
    mounted(){
        this.init()
    }
}
</script>

<style scoped>
    .carBox{
        padding: 4px;
        /* width: 800px; */
        background-color: #fff;
    }
    .demo-carousel img{
        width: 800px;
        height: 300px;
        display: inline-block;
        /* height: auto; */
        max-width: 100%;
    }

</style>